<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #333333;
        }

        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
        }

        .clear {
            clear: both;
        }

        body {
            font-family: "微软雅黑";
        }

        a {
            text-decoration: none;
            color: #333;
        }

        #charts {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }

        .market_map_title {
            font-size: 32px;
            text-align: left;
            padding-left: 50px;
        }
    </style>
</head>

<body>
    <h3 class="market_map_title">点亮城市</h3>
    <div id="charts"></div>
</body>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<!-- <script src="echarts-all.js"></script>	 -->
<script>
    var mycharts = echarts.init(document.getElementById('charts'))
    option = {
        dataRange: {
            show: false,
            x: 'left',
            y: 'bottom',
            splitList: [
                { start: 5, end: 5, color: 'orange' },//当值为5时，区域背景
                { start: 10, end: 10, color: '#ff6300' },//当值为10时，区域背景
                { start: 15, end: 15, color: '#ccc' },//当值为15时，区域背景
            ],
        },
        // geo: {
        //     map: 'china',
        //     label: {
        //         emphasis: {
        //             show: true
        //         }
        //     },
        //     //是否可以点击鼠标、滚轮缩放
        //     roam: true,
        // },
        series: [
            {
                name: '市场分布',
                type: 'map',
                mapType: 'china',
                //hoverable: false,
                // roam: true, //是否开启鼠标缩放和平移漫游
                itemStyle: {
                    normal: { label: { show: false } },
                    emphasis: { label: { show: true } } //高亮状态下的多边形和标签样式。
                },
                data: [],
            }
        ],
        markPoint: {
            symbol: 'pin',
            label: {show: true},
            data: [
                {
                    name: '南昌',
                    coord: [115.89, 28.68]
                }
            ]
        },
        animation: false

    };
    var ini_data = [];//初始化省份数组
    var provArr = ['天津', '北京', '湖南', '广东', '浙江', '福建', '湖北', '江西'];//获取的省份，有可能是从后台获取
    //正则省份，将省与市的字眼去掉，框架不识别
    for (var i = 0; i < provArr.length; i++) {
        var str = provArr[i];
        var re = /省|市/g;  //全局匹配
        var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
        ini_data.push(str2);
    }
    option.series[0].data = ini_data;//将拼接好的数组赋给参数集合
    mycharts.setOption(option);//跟新图表
    //鼠标滑过事件
    var testStr = ',' + provArr.join(",") + ",";
    mycharts.on('hover', function (param) {
        if (testStr.indexOf("," + param.name + ",") != -1) {
            return false;
        } else {
            param.value = 15;
            mycharts.setOption(option);
        }
    });

    //点击事件
    mycharts.on('click', function (params) {//点击事件
        select_province(params.name);
    });
    //初始化省颜色
    function ini_province() {
        var ini_len = option.series[0].data.length;
        for (var i = 0; i < ini_len; i++) {
            //初始化颜色
            option.series[0].data[i].value = 5;
            mycharts.setOption(option);
        }

    }
    //选中省颜色
    function select_province(province_name) {
        var len = option.series[0].data.length;
        for (var i = 0; i < len; i++) {
            if (option.series[0].data[i].name == province_name) {//如果匹配正确
                //先归零
                ini_province();
                //改变颜色
                option.series[0].data[i].value = 10;
                mycharts.setOption(option);
            }
        }
    }
</script>

</html>